<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button><br/><br/><br/>
    <div>a的值{{numbers.a}}</div>
    <button @click="numbers.a++">点击a++</button><br/><br/><br/>
    <div>b的值{{numbers.b}}</div>
    <button @click="numbers.b++">点击b++</button><br/><br/><br/>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:"#root",
      data:{
        isHot:true,
        numbers:{a:1,b:1}
      },
      computed:{
        info(){
          return this.isHot?'炎热':'凉爽';
        }
      },
      methods:{
        changeWeather(){
          this.isHot=!this.isHot
        }
      },
      watch:{
        isHot:{
          handler(newValue,oldValue){
            console.log('ishot被修改,newValue,oldValue',newValue,oldValue)
          }/*,
          //配置为true时,初始化就会执行hanler函数
          immediate:true*/
        },
        info:{
          handler(newValue,oldValue){
            console.log('info被修改,newValue,oldValue',newValue,oldValue)
          },
        },
        /*多级监视*/
        /*'numbers.a':{
          handler(newV,oldV){
            console.log('numbers.a发生变化,newV,oldV',newV,oldV)
          }
        },
        'numbers.b':{
          handler(newV,oldV){
            console.log('numbers.b发生变化,newV,oldV',newV,oldV)
          }
        }*/
        //默认不开启深度监视,当data中的某一个key对用的value是个对象是.默认不监视对象中的属性,监视的是对象的地址值
        // 可以通过下面方式开启深度监视,能够监视到对象中的属性的改变
        numbers: {
          deep:true,
          handler(newValue,oldValue){
            console.log('numbers对象中的属性发生改变:',newValue,oldValue)
          }
        }
      }
    });

  </script>

</body>
</html>
